<template>
	<div>
		<!-- 顶部导航  -->
		<header-nav></header-nav>
		<!-- 路由视图 -->
		<div class="container">
			<transition name="fade">
				<div v-if="$route.meta.alive">
					<keep-alive>
						<router-view />
					</keep-alive>
				</div>
				<div v-else>
					<router-view />
				</div>
			</transition>
		</div>
		<!-- 底部导航	 -->
		<footer-nav></footer-nav>
	</div>
</template>

<script>
	import FooterNav from "@/components/FooterNav.vue";
	import HeaderNav from "@/components/HeaderNav.vue";

	export default {
		data() {
			return {};
		},
		watch: {},
		methods: {},
		components: {
			"footer-nav": FooterNav,
			"header-nav": HeaderNav,
		},
	};
</script>

<style lang="scss">
	.fade-enter {
		opacity: 0;
		transform: translateX(100%);
	}

	.fade-leave-to {
		opacity: 0;
		transform: translateX(-100%);
		position: absolute;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: all 0.5s ease;
	}

	.container {
		// padding-top: 46px;
		padding-bottom: 50px;
		background-color: #f3f3f3;
	}
</style>
